<!DOCTYPE html>
<html>
<head>
    {include file="../application/common/header.html" /}
    <script src="__STATIC__/js/echarts-3.8.4.js"></script>
</head>

<body>
    <h4 align="center" style="color:#060;margin-top:40px;">班级历次考试实力排名升降图<br />（{$grade}级{$subject}）</h4>
    <p style="margin-top: 40px;"></p>
    <div id="studentScoreChart" style="width:100%;height:700px; margin:0 auto 20px auto;"></div>
    
    <script type="text/javascript">
        var grade = "{$grade}";
        var subject = "{$subject}";
        var clazz = parseInt("{$clazz}");
        var url = "/examScore/exam_chart_clazz";
        $(function(){
            loadReport();
        }) 
        function loadReport() {
            $.ajax({
               url: url + "/pageQuery.html",
               type: "POST",
               data: {
                  subject: subject,
                  grade: grade
               }
            }).done(function(data) {
                totalTermExamReport(data);
            })
        }
        var examTemp = [];
        function totalTermExamReport(list) {
            //基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('studentScoreChart'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(getOptionForList(list));
        }
        function getOptionForList(list) {
            var legendArray = getLegendArray();
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendArray
                },
                grid: {
                    hoverable:true,
                    bottom: '25%',
                    top: 120
                },
                xAxis: {
                    name: "考试",
                    type: 'category',
                    boundaryGap: false,
                    data: (function() {
                        var array = [];
                        for(var i = 0; i < list.length; i++) {
                            var examName = list[i].考试名称;
                            array.push(examName);
                        }
                        return array;
                    }()),
                    axisLabel: {
                        interval: 0, 
                        rotate: 80
                    }
                },
                yAxis: {
                    type: 'value',
                    name: "名次",
                    minInterval: 1,
                    min: 1,
                    inverse: true,
                    nameLocation: 'start'
                },
                series: (function() {
                    var dataArray = [];
                    for(var i in legendArray) {
                        dataArray.push({
                            name: legendArray[i],
                            type:'line',
                            symbol: 'arrow',
                            symbolSize: 15,
                            data: []
                        });
                    }
                    for(var i = 0; i < list.length; i++) {
                        for(var j=0;j<clazz;j++){
                            dataArray[j].data.push(list[i][(j+1)]);
                        }
                    }
                    return dataArray;
                })()
            };
            return option;
        }
        function getLegendArray() {
            var zdArr = [];
            for(var i=0;i<clazz;i++){
                zdArr.push((parseInt(i)+1)+"班");
            }
            return zdArr;
        }
    </script>
</body>
</html>